<template>
  <div class="dashboard-editor-container">

    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :lg="4">
        <div class="chart-wrapper">
<!--          <map-chart/>-->
          <el-select v-model="latn_value" placeholder="全省" style="width: 100%">
            <el-option
              v-for="item in latn_options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="chart-wrapper">
          <el-date-picker
            v-model="month_value"
            type="month"
            placeholder="选择月"
            style="width: 100%">
          </el-date-picker>
        </div>
        <el-card class="box-card" style="margin-top:10px">
          <div slot="header" class="clearfix">
            <span>访问信息</span>
          </div>
          <ul class="icon-list">
            <li><span><i class="el-icon-data-line"></i><span class="icon-name">近期焦点</span></span></li>
            <li><span><i class="el-icon-medal-1"></i><span class="icon-name">用户访问排名</span></span></li>
            <li><span><i class="el-icon-pie-chart"></i><span class="icon-name">报表访问量排名</span></span></li>
            <li><span><i class="el-icon-chat-round"></i><span class="icon-name">公告</span></span></li>
            <li><span><i class="el-icon-notebook-2"></i><span class="icon-name">口径说明</span></span></li>
            <li><span><i class="el-icon-search"></i><span class="icon-name">H码查询</span></span></li>
          </ul>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="20">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
          <span>移动市场</span>
          </div>
          <el-table
            :data="tableData"
            size="mini"
            max-height="300px"
            style="width: 100%">
            <el-table-column
              prop="latn"
              label="本地网">
            </el-table-column>
            <el-table-column label="甘肃电信">
              <el-table-column
                prop="name"
                label="到达数">
              </el-table-column>
              <el-table-column
                prop="address"
                label="累计份额">
              </el-table-column>
              <el-table-column
                prop="address"
                label="当日净增">
              </el-table-column>
            </el-table-column>
            <el-table-column label="甘肃移动">
              <el-table-column
                prop="name"
                label="到达数">
              </el-table-column>
              <el-table-column
                prop="address"
                label="累计份额">
              </el-table-column>
              <el-table-column
                prop="address"
                label="当日净增">
              </el-table-column>
            </el-table-column>
            <el-table-column label="甘肃联通">
              <el-table-column
                prop="name"
                label="到达数">
              </el-table-column>
              <el-table-column
                prop="address"
                label="累计份额">
              </el-table-column>
              <el-table-column
                prop="address"
                label="当日净增">
              </el-table-column>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card class="box-card" style="margin-top:10px">
          <div slot="header" class="clearfix">
            <span>趋势图</span>
          </div>
          <line-chart :chart-data="lineChartData" height="300px"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script type="text/javascript">
  import MapChart from './dashboard/Map';
  import DatePanel from '../components/DatePanel/index';
  import LineChart from "./dashboard/LineChart";

  const lineChartData = {
    newVisitis: {
      expectedData: [100, 120, 161, 134, 105, 160, 165,100, 120, 161, 134, 105, 160, 165,100, 120, 161, 134, 105, 160, 165,100, 120, 161, 134, 105, 160, 165,100, 120, 161,],
      actualData: [120, 82, 91, 154, 162, 140, 145,120, 82, 91, 154, 162, 140, 145,120, 82, 91, 154, 162, 140, 145,120, 82, 91, 154, 162, 140, 145,120, 82, 91, ],
      xData:[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
    }
  }

  export default {
    name: 'Index',
    components: {
      LineChart,
      DatePanel,
      MapChart
    },
    data() {
      return {
        lineChartData: lineChartData.newVisitis,
        // 组件使用的时间对象
        date: new Date(),
        // 是否显示时分秒
        showTime: false,
        tableData: [{
          latn: '兰州',
          name: '1',
          address: '1'
        }, {
          latn: '天水',
          name: '1',
          address: '1'
        }, {
          latn: '白银',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '酒泉',
          name: '1',
          address: '1'
        }, {
          latn: '全省',
          name: '1',
          address: '1'
        }],
        latn_options:[{
          value: '全省',
          label: '全省'
        }, {
          value: '兰州',
          label: '兰州'
        }, {
          value: '天水',
          label: '天水'
        }, {
          value: '白银',
          label: '白银'
        }, {
          value: '酒泉',
          label: '酒泉'
        }],
        latn_value: '',
        month_value:''
      }
    },
    mounted() {

    },
    methods: {
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      }
    },

    watch: {
      date(val) {
        console.log(val);
      }
    }
  }
</script>

<style lang="scss" scoped>
  th{height: 20px}
  .dashboard-editor-container {
    padding: 10px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .chart-wrapper {
      background: #fff;
      padding: 5px;
      margin-bottom: 10px;
    }
  }

  .icon-list {
    overflow: hidden;
    list-style: none;
    padding: 0 !important;
    border-radius: 4px
  }

  .icon-list li {
    float: left;
    width: 50%;
    text-align: center;
    height: 120px;
    line-height: 100px;
    color: #666;
    font-size: 13px;
    margin-right: -1px;
    margin-bottom: -1px;
    cursor: pointer;
  }

  .icon-list li:after {
    content: "";
    height: 100%
  }

  .icon-list li:after, .icon-list li span {
    display: inline-block;
    vertical-align: middle
  }

  .icon-list li span {
    line-height: normal;
    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
    color: #99a9bf;
    transition: color .15s linear
  }

  .icon-list li i {
    display: block;
    font-size: 32px;
    margin-bottom: 15px;
    color: #606266;
    transition: color .15s linear
  }

  .icon-list li .icon-name {
    display: inline-block;
    padding: 0 3px;
    height: 1em
  }

  .icon-list li:hover i, .icon-list li:hover span {
    color: #5cb6ff
  }

  @media (max-width: 1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
